<script lang="ts" setup>
import { reactive, ref,defineExpose } from 'vue'
import { RegionFullSelects } from 'v-region'
import type { RegionValues} from 'v-region'
import {ElMessage, FormInstance} from "element-plus";
import {useUserStore} from '@/stores/user'
import {useAddressStore} from '@/stores/address'
import {addAddressAPI} from '@/apis/address'

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'


const ruleFormRef = ref<FormInstance>()


const region = ref<RegionValues>({
  province: '',
  city: '',
  area: '',
  town: ''
})

const form = reactive<RuleForm>({
  receiver_name:'',
  phone_number:'',
  address:'',
})

const rules={
  receiver_name:[
    { required: true, message: '收货人不能为空', trigger: 'blur' },
    { min: 1, max: 10, message: '长度在1-10个字符', trigger: 'blur' },
  ],
  phone_number:[
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { min: 11, max: 11, message: '手机号码应为11位数字', trigger: 'blur' },
  ],
  region:[
    { required: true, message: '请选择地区', trigger: 'blur' },
  ],
  address:[
    { required: true, message: '详细地址不能为空', trigger: 'blur' },
    { min: 1, max: 18, message: 'Length should be 1 to 18', trigger: 'blur' },
  ]
}

const addAddress = async ()=> {

  const address={
    aid:'',
    uid:useUserStore().userInfo.uid,
    receiver_name:form.receiver_name,
    phoneNumber:form.phone_number,
    province: region.value.province,
    city: region.value.city,
    area: region.value.area,
    town: region.value.town,
    address:form.address,
    isDefault:useAddressStore().isEmpty?1:0
  }

  //请求后端
  const res=await addAddressAPI(address)
  console.log(res)
  ElMessage({
    message: res.message,
    type: res.code===200?'success':'error',
  })
  //存储到本地
  if(res.code===200){
    address.aid=res.data
    useAddressStore().addAddress(address)
  }
}

const handleSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if(region.value.town===undefined){
        ElMessage({
          message: '请选择地区！',
          type: 'warning',
        })
      }else{
        addAddress()
        dialogFormVisible.value=false
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

const changeVisible=()=>{
  dialogFormVisible.value=true
}

// 暴露方法给父组件
defineExpose({ changeVisible })
</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="添加收货地址" width="500">
    <el-form :model="form"
             :rules="rules"
              ref="ruleFormRef">

      <el-form-item label="收货人" :label-width="formLabelWidth" prop="receiver_name">
        <el-input v-model="form.receiver_name" autocomplete="off" />
      </el-form-item>

      <el-form-item label="手机号码" :label-width="formLabelWidth" prop="phone_number">
        <el-input v-model="form.phone_number" autocomplete="off" />
      </el-form-item>

      <el-form-item label="地区" :label-width="formLabelWidth">
        <!--        4级行政区划选择-->
        <RegionFullSelects  v-model="region"/>
      </el-form-item>

      <el-form-item label="详细地址" :label-width="formLabelWidth" prop="address">
        <el-input v-model="form.address" autocomplete="off" />
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit(ruleFormRef)">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="less">

</style>